<template>
  <!-- 项目单价分析 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>项目单价排名</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row style="margin-top:10px" :gutter="15">
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getLandFormsAll">全部</span>
              <span>{{ landformsTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="8">
                <EchartsPie :data-list="proInfoSuperviseVoByRegionChart" :legend="regionLegend" @setTitle="setTitle" />
              </el-col>
              <el-col :span="16">
                <ProjectTable :list-data="regionList" type="1" :list-header="LandlistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getProTypeAll">全部</span>
              <span>{{ typeTtitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="7">
                <EchartsPie :data-list="proTypeChart" :legend="proTypeLegend" @setTitle="setTitle" />
              </el-col>
              <el-col :span="17">
                <ProjectTable :list-data="proTypeList" type="2" :list-header="TypelistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="24">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span class="all" @click="getLocationAll">全部</span>
              <span>{{ regionTitle }}</span>
              <span class="more" @click="goProject()">更多<i class="el-icon-arrow-right" /></span>
            </h3>
            <el-row class="cont">
              <el-col :span="6">
                <EchartsPie :data-list="locationChar" :legend="locationLegend" @setTitle="setTitle" />
              </el-col>
              <el-col :span="18">
                <ProjectTable :limit-move-num="8" :list-data="locationList" type="3" :list-header="listHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { ProjectUnitPrice } from '@/api/statisticalAnalysis/ProjectUnitPrice'
import EchartsPie from './components/EchartsPie'
import ProjectTable from './components/ProjectTable'
export default {
  name: 'ProjectUnitPrice',
  components: {
    EchartsPie,
    ProjectTable
  },
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      // 标题
      landformsTitle: '地貌类型',
      regionTitle: '区/县项目单价排名',
      typeTtitle: '项目类型',
      // 地区类型
      regionLegend: [], // 图形表头
      proInfoSuperviseVoByRegionChart: [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }], // 图形
      regionAllObj: {}, // 完整表格
      regionList: [], // 表格
      LandlistHeader: [ // 表头
        { name: '项目名称' },
        { name: '地貌类型' },
        { name: '项目单价(元)' }
      ],
      // 项目类型
      proTypeLegend: [], // 图形表头
      proTypeChart: [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }], // 图形
      proTypeAllObj: [], // 完整表格
      proTypeList: [], // 表格
      TypelistHeader: [
        { name: '项目名称' },
        { name: '项目类型' },
        { name: '项目单价(元)' }
      ],
      // 区县类型
      locationLegend: [], // 图形表头
      locationChar: [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }], // 图形
      locationAllObj: [], // 完整表格
      locationList: [], // 表格
      listHeader: [
        { name: '项目名称' },
        { name: '排名' },
        { name: '项目单价(元)' }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 改变时间
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.regionList = []
      this.proTypeList = []
      this.locationList = []
      this.getList()
    },
    // 获取页面数据
    async getList() {
      const { data: {
        proInfoSuperviseVoListByRegionType: { proInfoSuperviseVoByRegionChart, proInfoSuperviseVoByRegionList },
        proInfoSuperviseVoListByRegion: { proInfoSuperviseVoChart, proInfoSuperviseVoList },
        proInfoSuperviseVoListByProType: { proInfoSuperviseVoByProTypeChart, proInfoListByProType }
      }} = await ProjectUnitPrice(this.filter)
      // 区县类型e
      this.locationChar = proInfoSuperviseVoChart.length ? proInfoSuperviseVoChart : [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }]
      this.locationAllObj = proInfoSuperviseVoList // 区分后的项目
      for (const k in proInfoSuperviseVoList) {
        this.locationLegend.push(k)
        this.locationList = [...this.locationList, ...proInfoSuperviseVoList[k]]
      }
      // console.log(this.locationLegend)
      // 地区类型
      this.proInfoSuperviseVoByRegionChart = proInfoSuperviseVoByRegionChart.length ? proInfoSuperviseVoByRegionChart : [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }]
      this.regionAllObj = proInfoSuperviseVoByRegionList // 区分后的项目
      for (const k in proInfoSuperviseVoByRegionList) {
        this.regionLegend.push(k)
        this.regionList = [...this.regionList, ...proInfoSuperviseVoByRegionList[k]]
      }
      // console.log(this.regionLegend)
      // 项目类型
      this.proTypeChart = proInfoSuperviseVoByProTypeChart.length ? proInfoSuperviseVoByProTypeChart : [{ totalAmount: 0, regionTypeName: '无', proNum: 0, proportion: 0 }]
      this.proTypeAllObj = proInfoListByProType // 区分后的项目
      for (const k in proInfoListByProType) {
        this.proTypeLegend.push(k)
        this.proTypeList = [...this.proTypeList, ...proInfoListByProType[k]]
      }
      // console.log(this.proTypeLegend)
    },
    // 跳转项目页
    goProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    },
    // 获取全部地貌类型数据
    getLandFormsAll() {
      this.landformsTitle = '地貌类型'
      this.regionList = []
      console.log(this.regionAllObj)
      for (const k in this.regionAllObj) {
        this.regionList = [...this.regionList, ...this.regionAllObj[k]]
      }
    },
    getProTypeAll() {
      this.typeTtitle = '项目类型'
      this.proTypeList = []
      for (const k in this.proTypeAllObj) {
        this.proTypeList = [...this.proTypeList, ...this.proTypeAllObj[k]]
      }
    },
    getLocationAll() {
      this.regionTitle = '区/县'
      this.locationList = []
      for (const k in this.locationAllObj) {
        this.locationList = [...this.locationList, ...this.locationAllObj[k]]
      }
    },
    // 切换标题和数据
    setTitle(title) {
      if (this.proTypeLegend.includes(title)) {
        this.typeTtitle = title
        for (const k in this.proTypeAllObj) {
          if (k === title) {
            this.proTypeList = JSON.parse(JSON.stringify(this.proTypeAllObj[k]))
            return
          }
        }
      } else if (this.locationLegend.includes(title)) {
        this.regionTitle = title
        for (const k in this.locationAllObj) {
          if (k === title) {
            this.locationList = JSON.parse(JSON.stringify(this.locationAllObj[k]))
            return
          }
        }
      } else if (this.regionLegend.includes(title)) {
        this.landformsTitle = title
        for (const k in this.regionAllObj) {
          if (k === title) {
            this.regionList = JSON.parse(JSON.stringify(this.regionAllObj[k]))
            return
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
